﻿@page "/blazor"

<PageTitle>温州数闪科技有限公司</PageTitle>

<SectionContent SectionName="document">
    <MButton Text
             Class="mr-9 h8 emphasis2--text"
             Href="https://docs.masastack.com/blazor/getting-started/installation"
             Target="_blank">
        文档
    </MButton>
</SectionContent>

<div class="home-banner without-carousels">
    <MRow NoGutters Style="height: 100%">
        <MCol Cols="12" Lg="6" Class="intro-wrapper">
            <div class="intro">
                <div class="intro-title">企业级多端组件库</div>
                <div class="intro-subtitle">基于Material Design , MAUI的最佳拍档</div>
                <div class="intro-actions d-flex align-center">
                    <MButton Class="gradual-btn" Text Ripple="false" Href="https://docs.masastack.com/blazor/getting-started/installation">开始使用</MButton>
                    <MButton Text Ripple="false" Class="text-capitalize" Href="https://github.com/BlazorComponent/MASA.Blazor">
                        <MIcon Class="mr-2">mdi-github</MIcon>
                        Github
                    </MButton>
                    <MButton Class="demo-btn rounded-pill emphasis--text ml-4 text-capitalize hidden-sm-and-down"
                             Text
                             Href="https://blazor-pro.masastack.com"
                             Target="_blank"
                             Large
                             Style="font-size: 20px">
                        <span class="text-decoration-underline">
                            即刻体验PRO
                        </span>
                        <MIcon Right>mdi-open-in-new</MIcon>
                    </MButton>
                </div>
            </div>
        </MCol>
        <MCol Cols="12" Lg="6" Class="cover-wrapper">
            <img src="https://cdn.masastack.com/images/blazor_banner.png"
                 width="100%" />
        </MCol>
    </MRow>

    <NextViewInteractiveTrigger Class="hidden-md-and-up" MoreText="WHY MASA BLAZOR" />
</div>

<div class="home-content">
    <div class="home-content__item">
        <div class="home-content__item-header">
            <MenuTitle Title="WHY MASA BLAZOR" />
            <div class="home-content__item-subtitle">为什么选择MASA Blazor？</div>
        </div>
        <MRow Class="building-block__item-cards no-gutters-on-mobile">
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon5.svg"
                            Title="组件丰富"
                            Description="Vuetify基础组件1:1还原，还有更多实用的预置组件">
                </BlazorCard>
            </MCol>
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon6.svg"
                            IsImageRight="true"
                            Title="简易上手"
                            Description="全面丰富的文档，配套免费的视频教程">
                </BlazorCard>
            </MCol>
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon7.svg"
                            Title="全职开源"
                            Description="全职团队维护，长期提供支持">
                </BlazorCard>
            </MCol>
        </MRow>
        <MRow Class="no-gutters-on-mobile">
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon8.svg"
                            IsImageRight="true"
                            Title="现代UI设计"
                            Description="设计风格现代，UI体验优秀">
                </BlazorCard>
            </MCol>
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon9.svg"
                            Title=".NET 全栈"
                            Description="搭配MASA Framework实现开箱即用的.NET全栈开发">
                </BlazorCard>
            </MCol>
            <MCol Cols="12" Md="4">
                <BlazorCard Image="https://cdn.masastack.com/images/icon10.svg"
                            IsImageRight="true"
                            Title="社区活跃"
                            Description="用户实时互动，加入我们构建最开放的开源社区">
                </BlazorCard>
            </MCol>
        </MRow>
    </div>

    <div class="home-content__item">
        <div class="home-content__item-header">
            <MenuTitle Title="用户信赖" />
        </div>
        <MRow Class="building-block__item-cards no-gutters-on-mobile">
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo03.png" width="100%" />
            </MCol>
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo01.png" width="100%" />
            </MCol>
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo05.png" width="100%" />
            </MCol>
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo06.png" width="100%" />
            </MCol>
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo04.png" width="100%" />
            </MCol>
            <MCol Cols="6" Md="2">
                <img src="https://cdn.masastack.com/images/companylogo02.png" width="100%" />
            </MCol>
        </MRow>
    </div>
</div>
